<template>
  <div class="wrapper">
    <div class="titleInfo">
      <span>中转仓名称:{{ detailTable[0]?.name }}</span>
      <span>中转仓编号:{{ detailTable[0]?.id }}</span>
      <span
        >中转仓经营时间:{{ detailTable[0]?.stationOperatingStartTime }} - {{ detailTable[0]?.stationOperatingEndTime
        }}<el-button link size="large" type="primary" :icon="Edit" @click="timeDialogVisible = true"></el-button
      ></span>
    </div>
    <div class="baicInfo">
      <div>
        <div>基本信息</div>
        <div>
          <el-table
            stripe
            border
            :cell-style="{ textAlign: 'center', fontSize: '12px' }"
            :header-cell-style="{
              textAlign: 'center',
              background: '#009688',
              color: 'white',
              fontSize: '13px',
              fontWeight: '100'
            }"
            style="width: 100%"
            :data="detailTable"
          >
            <el-table-column label="仓站编号" prop="id" width="200" />
            <el-table-column label="仓站名称" prop="name" />
            <el-table-column label="仓站等级" prop="stationLevelName" />
            <el-table-column label="面积(平方米)" prop="acreage" />
            <el-table-column label="所属地市" prop="cityName" />
            <el-table-column label="所属区县" prop="countyName" />
          </el-table>
        </div>
        <div>设施信息</div>
        <div class="device">
          <span v-for="item in detail?.facility" :key="item.facilityTypeName">{{ item.facilityTypeName }}:{{ item.amount }}</span>
        </div>
        <div>
          关联仓经（10）<span><el-button link type="primary" @click="handleAccStationer"> 关联仓经</el-button></span>
        </div>
        <div>
          <el-table
            stripe
            border
            :cell-style="{ textAlign: 'center', fontSize: '12px' }"
            :header-cell-style="{
              textAlign: 'center',
              background: '#009688',
              color: 'white',
              fontSize: '13px',
              fontWeight: '100'
            }"
            style="width: 100%"
            :data="postmaster"
          >
            <el-table-column label="工号" prop="userName" width="260" />
            <el-table-column label="姓名" prop="fullName" />
            <el-table-column label="形象照片" prop="personalImagePhoto">
              <template #default="scope">
                <el-image
                  v-if="scope.row.personalImagePhoto"
                  style="width: 50px; height: 50px"
                  :src="scope.row.personalImagePhoto"
                  fit="cover"
                ></el-image>
                <!-- <el-image style="width: 50px; height: 50px" :src="scope.row.personalImagePhoto" fit="cover"></el-image> -->
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div>
          关联驿站(小区数20)<span><el-button link type="primary" @click="handleAccStage">关联驿站</el-button></span>
        </div>
        <div>
          <el-table
            stripe
            border
            :cell-style="{ textAlign: 'center', fontSize: '12px' }"
            :header-cell-style="{
              textAlign: 'center',
              background: '#009688',
              color: 'white',
              fontSize: '13px',
              fontWeight: '100'
            }"
            style="width: 100%"
            :data="detail?.stageList"
          >
            <el-table-column label="驿站名称" prop="stageName" width="260" />
            <el-table-column label="已关联小区" prop="neighbourhoodList" />
            <el-table-column label="已关联小区总户数" prop="totalHouseholds" />
          </el-table>
        </div>
        <div>
          关联车辆(10)<span><el-button link type="primary" @click="handleAccVehicle">关联车辆</el-button></span>
        </div>
        <div>
          <el-table
            stripe
            border
            :cell-style="{ textAlign: 'center', fontSize: '12px' }"
            :header-cell-style="{
              textAlign: 'center',
              background: '#009688',
              color: 'white',
              fontSize: '13px',
              fontWeight: '100'
            }"
            style="width: 100%"
            :data="detail?.vehicle"
          >
            <el-table-column label="车辆编号/车牌号" prop="vehicleCode" width="260">
              <template #default="scope">
                <span>{{ scope.row.vehicleCode + "/" + scope.row.vehicleNumber }}</span>
              </template>
            </el-table-column>
            <el-table-column label="车辆类型" prop="vehicleTypeName" />
            <el-table-column label="当前关联人员" prop="fullName" />
            <el-table-column label="所需驾驶证类型" prop="driverLicenseTypeName" />
            <el-table-column label="状态" prop="vehicleStatus">
              <template #default="scope">
                <span v-if="scope.row.vehicleStatus == 1">正常</span>
                <span v-else-if="scope.row.vehicleStatus == 2">维修中</span>
                <span v-else-if="scope.row.vehicleStatus == 3">报废</span>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div>
          关联配送员（30）<span><el-button link type="primary" @click="handleAccDelivery">关联配送员</el-button></span>
        </div>
        <div>
          <el-table
            stripe
            border
            :cell-style="{ textAlign: 'center', fontSize: '12px' }"
            :header-cell-style="{
              textAlign: 'center',
              background: '#009688',
              color: 'white',
              fontSize: '13px',
              fontWeight: '100'
            }"
            style="width: 100%"
            :data="detail?.delivery"
          >
            <el-table-column label="工号" prop="userName" width="260" />
            <el-table-column label="姓名" prop="fullName" />
            <el-table-column label="形象照" prop="personalImagePhoto"></el-table-column>
            <el-table-column label="关联车辆" prop="vehicleCode" />
            <el-table-column label="车辆押金" prop="vehicleDeposit" />
            <el-table-column label="车辆使用费" prop="vehicleUsageFee" />
          </el-table>
        </div>
        <div>
          关联订单分拣员（10）<span><el-button link type="primary" @click="handleAccPicker">关联订单分拣员</el-button></span>
        </div>
        <div>
          <el-table
            stripe
            border
            :cell-style="{ textAlign: 'center', fontSize: '12px' }"
            :header-cell-style="{
              textAlign: 'center',
              background: '#009688',
              color: 'white',
              fontSize: '13px',
              fontWeight: '100'
            }"
            :data="detail?.picker"
            style="width: 100%"
          >
            <el-table-column label="工号" prop="userId" width="260" />
            <el-table-column label="姓名" prop="fullName" />
          </el-table>
        </div>
        <div>关联店铺（20）</div>
        <div>
          <el-table
            stripe
            border
            :cell-style="{ textAlign: 'center', fontSize: '12px' }"
            :header-cell-style="{
              textAlign: 'center',
              background: '#009688',
              color: 'white',
              fontSize: '13px',
              fontWeight: '100'
            }"
            style="width: 100%"
            :data="detail?.shop"
          >
            <el-table-column label="店铺ID" prop="shopId" width="260" />
            <el-table-column label="店铺名称" prop="shopName" />
          </el-table>
        </div>
      </div>
    </div>
  </div>
  <el-dialog v-model="timeDialogVisible" title="修改经营时间" width="500">
    <div>
      <el-form :model="updateTime" ref="refUpdateTime" :rules="rulesUpdateTime" label-width="100">
        <el-form-item prop="stationOperatingStartTime" label="时间范围">
          <el-date-picker
            v-model="timeVal"
            type="datetimerange"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
            format="HH:mm:ss"
            time-format="hh:mm:ss"
          />
        </el-form-item>
      </el-form>
    </div>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="timeDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="handleSubmitTime(refUpdateTime as FormInstance)"> 确认 </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script lang="tsx" setup name="Detail">
import dayjs from "dayjs";
import { ref, onMounted } from "vue";
import { useRoute, useRouter } from "vue-router";
import { updateSiteTimeAPI } from "@/api/modules/city/siteAPI";
import { Edit } from "@element-plus/icons-vue";
import { ElMessage, FormInstance, FormRules } from "element-plus";
import { getCityTransitDetailAPI } from "@/api/modules/city/cityTransit/api";
import { Transit, TransitDetail } from "@/api/interface/city/cityTransit";
const route = useRoute();
const router = useRouter();
const timeVal = ref();
const timeDialogVisible = ref<boolean>(false);
const updateTime = ref<Transit.UpdateTime>({
  id: route.query.id as string,
  stationOperatingStartTime: "",
  stationOperatingEndTime: ""
});
const refUpdateTime = ref<FormInstance>();
const rulesUpdateTime = ref<FormRules>({});
// 详情
const detail = ref<TransitDetail.Data>();
// 详情信息
const detailTable = ref<TransitDetail.Detail[]>([]);
// 站长列表
const postmaster = ref<TransitDetail.Postmaster[]>([]);
const handleSubmitTime = (formEL: FormInstance) => {
  if (timeVal.value) {
    updateTime.value.stationOperatingStartTime = dayjs(timeVal.value[0]).format("YYYY-MM-DD HH:mm:ss");
    updateTime.value.stationOperatingEndTime = dayjs(timeVal.value[1]).format("YYYY-MM-DD HH:mm:ss");
  } else {
    ElMessage.error("请选择时间范围");
    return;
  }
  formEL.validate((valid: boolean) => {
    if (valid) {
      updateSiteTime();
    } else {
      ElMessage.error("请检查输入项");
    }
  });
};
const handleAccStationer = () => {
  router.push({ path: "/cityLevel/cityTransit/accStationer", query: { id: route.query.id } });
};
const handleAccStage = () => {
  router.push({ path: "/cityLevel/cityTransit/accStage", query: { id: route.query.id } });
};
const handleAccVehicle = () => {
  router.push({ path: "/cityLevel/cityTransit/accVehicle", query: { id: route.query.id } });
};
const handleAccDelivery = () => {
  router.push({ path: "/cityLevel/cityTransit/accDelivery", query: { id: route.query.id } });
};
const handleAccPicker = () => {
  router.push({ path: "/cityLevel/cityTransit/accPicker", query: { id: route.query.id } });
};
const handleDetail = async (id: number) => {
  const { data } = await getCityTransitDetailAPI(id);
  if (data) {
    detail.value = data;
    if (data.postmaster) {
      postmaster.value.push(data.postmaster);
    }
  }
};
const updateSiteTime = async () => {
  const { code, msg } = await updateSiteTimeAPI(updateTime.value);
  if (code == "200") {
    ElMessage.success("修改成功");
    timeDialogVisible.value = false;
    handleDetail(Number(route.query.id));
  } else {
    ElMessage.error(msg);
  }
};
onMounted(() => {
  if (route.query.id != undefined) {
    handleDetail(Number(route.query.id));
  }
});
</script>

<style lang="scss" scoped>
body {
  font-size: 13px;
  .wrapper {
    padding: 15px;
    background-color: white;
  }
  .titleInfo {
    margin-bottom: 10px;
    span {
      margin-right: 70px;
      font-size: 13px;
      color: gray;
    }
  }
  .baicInfo {
    padding: 10px;
    font-size: 13px;
    color: gray;
    border: 1px solid #e6e6e6;
    div {
      margin-top: 12px;
    }
    .device {
      padding: 20px 10px;
      border: 1px solid #e6e6e6;
      span {
        margin-right: 60px;
      }
    }
  }
  .sms-code {
    position: absolute;
    right: 5px;
  }
}
::v-deep .el-form-item__label {
  font-size: 13px;
}
::v-deep .el-button > span {
  font-size: 13px;
}
::v-deep .el-input__inner {
  font-size: 13px;
}
</style>
